<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作品2</title>

		<link type="text/css" rel="stylesheet" href="css/two/two.css" />
		<!-- 179000646唐渝 -->
	</head>
	<body>
		<!-- 整体 -->
		<div class="a">
			<!-- 头部 -->
			<div class="head">
				<table>
					<tr>
						<td class="begin"><font>开始</font>
							<select id="mysel">
							<option value="img/two/bg1.jpg">1</option>
							<option value="img/two/bg2.jpg">2</option>
							<option value="img/two/bg3.jpg">3</option>
						</select>
						</td>
						<a class="user"><img src="img/two/user.jpg" /></a>
					</tr>
				</table>
			</div>
			<!-- 中间表格 -->
			<div class="table">
				<!-- 表格一 -->
				<div class="table_1">
					<table class="t_1">
						<tr>
							<td class="td">
								<img src="img/two/tab1.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab2.jpg">
							</td>
							<td class="td" colspan="2">
								<img src="img/two/btab1.jpg">
							</td>
						</tr>
						<tr>
							<td class="td">
								<img src="img/two/tab4.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab3.jpg">
							</td>
							<td class="td" colspan="2">
								<img src="./img/two/btab2.jpg">
							</td>
						</tr>
						<tr>
							<td class="td">
								<img src="img/two/tab5.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab6.jpg">
							</td>
							<td class="td" colspan="2">
								<img src="img/two/btab3.jpg">
							</td>
						</tr>
						<tr>
							<td class="td">
								<img src="img/two/tab8.jpg">
							</td>
							<td class="td">
								<img src="./img/two/tab7.jpg">
							</td>
							<td class="td" colspan="2">
								<img src="img/two/btab4.jpg">
							</td>
						</tr>
						<tr>
							<td class="td" colspan="2">
								<img src="img/two/btab5.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab9.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab10.jpg">
							</td>
						</tr>
					</table>
				</div>
				<!-- 表格二 -->
				<div class="table_2">
					<table class="t_2">
						<tr>
							<td class="td" colspan="2">
								<img src="img/two/btab6.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab11.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab12.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab13.jpg">
							</td>
						</tr>
						<tr>
							<td class="td">
								<img src="img/two/tab14.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab15.jpg">
							</td>
							<td class="td" colspan="2">
								<img src="img/two/btab7.jpg">
							</td>
						</tr>
						<tr>
							<td class="td">
								<img src="img/two/tab16.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab17.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab18.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab19.jpg">
							</td>
						</tr>
						<tr>
							<td class="td" colspan="2">
								<img src="img/two/btab8.jpg">
							</td>
							<td class="td" colspan="2">
								<img src="img/two/btab9.jpg">
							</td>
						</tr>
						<tr>
							<td class="td">
								<img src="img/two/tab20.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab19.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab22.jpg">
							</td>
							<td class="td">
								<img src="img/two/tab23.jpg">
							</td>
						</tr>
					</table>
				</div>
			</div>
			<!-- 尾部 -->
			<div class="foot">
				<a class="ty"><img src="./img/two/ty.png"></a>
			</div>

		</div>
		<script type="text/javascript">
			//1
			var mysel = document.querySelector("#mysel");
			mysel.addEventListener("change",function(){
				// console.log("选项改变");
				// console.log(this.options[this.selectedIndex]);
				// console.log(this.options[this.selectedIndex].value,this.options[this.selectedIndex].text);

				var index = this.selectedIndex;;
				var selOption = this.options[index];
				var imgsrc = selOption.value;
				// console.log(imgsrc);
				//使用DOM操作样式，给body换背景
				var mybody = document.body;
				mybody.style.backgroundImage = "url("+imgsrc+")";
				
			});

			//2
			// function initSel() {
			// 	var mysel = document.createElement("select");
				
			// 	for(let i = 1; i <= 3; i++){
			// 		var opt = document.createElement("option");
			// 		opt.text = "bg${i}.jpg";
			// 		opt.value = "img/two/bg${i}.jpg" ;
			// 		mysel.appendChild(opt);
			// 	}

			// 	var table = document.querySelectorAll("table")[0];
			// 	var mytd = table.childNodes[1].firstChild.childNodes[1];
			// 	mytd.appendChild(mysel);

			// 	mysel.addEventListener("change", function() {

			// 		var index = this.selectedIndex;;
			// 		var opt = this.options[index];
			// 		var imgsrc = opt.value;

			// 		//使用DOM操作样式，给body换背景
			// 		var mybody = document.body;
			// 		mybody.style.backgroundImage = 'url(${imgsrc})';
			// 	});

			// 	var event = document.createEvent("HTMLEvents");
			// 	event.initEvent("change", false, false);
			// 	mysel.dispatchEvent(event);
			// }
			// initSel();
		</script>
	</body>
</html>
